<template>
  <div>
    <div
      style="border: 2px solid skyblue;margin: 20px auto;width:20%;text-align:center;font-size:40px;background:skyblue"
    >成绩展示</div>
    <div>
      <div id="personGrade" style="margin:10px auto;width:70%;height:400px"></div>
    </div>
    <div
      style="border:5px solid skyblue;width:80%;height:500px;margin:0 auto;display:flex;flex-wrap: wrap;text-align:center"
    >
      <div style="border:2px solid blue;width:10%;height:100px;font-size:25px;margin:20px 6%">
        平均成绩
        <div>{{averageGrade}}</div>
      </div>
      <div style="border:2px solid blue;width:10%;height:100px;font-size:25px;margin:20px 6%">
        最高成绩
        <div>{{maxGrade}}</div>
      </div>
      <div style="border:2px solid blue;width:10%;height:100px;font-size:25px;margin:20px 6%">
        最低成绩
        <div>{{minGrade}}</div>
      </div>
      <div style="border:2px solid blue;width:10%;height:100px;font-size:25px;margin:20px 6%">
        总分排名
        <div>{{rank}}</div>
      </div>
      <div style="border:2px solid blue;width:86%;height:300px;margin:20px 6%" id="shanxingtu"></div>
    </div>
  </div>
</template>

<script>
import * as ECharts from "echarts";
export default {
  name: "gradeeShow",
  data() {
    return {
      studentGradeName: [],
      studentGradeNum: [],
      shanxingtuData: [],
      params: {
        queryParams: sessionStorage.getItem("grade")
      },
      rankNum: [],
      rank: ""
    };
  },
  mounted() {
    this.gradedata();
  },
  methods: {
    async gradedata() {
      await this.getGrade();
      await this.getRankGrade();
      let personAllNum = 0;
      this.studentGradeNum.forEach(item => (personAllNum += item));
      this.rank = this.rankNum.indexOf(personAllNum) + 1;
    },
    async getRankGrade() {
      await this.$API
        .call("/getRankStudentAllGradde", "get", this.params, "")
        .then(res => {
          res.data.forEach(obj => {
            const sum = Object.values(obj).reduce((acc, curr) => {
              if (typeof curr === "number") {
                return acc + curr;
              } else {
                return acc;
              }
            }, 0);
            this.rankNum.push(sum);
          });
          this.rankNum.sort((a, b) => b - a);
        });
    },
    async getGrade() {
      await this.$API.call("/getStudentGrade", "get", "", "").then(res => {
        this.studentGradeName = res.data.gradeName;
        this.studentGradeNum = res.data.gradeNum;
      });

      //条形图
      const personGradeChart = ECharts.init(
        document.getElementById("personGrade")
      );
      personGradeChart.setOption({
        title: {
          show: true,
          text: "个人成绩",
          textStyle: {
            fontStyle: "italic",
            fontSize: 20
          },
          x: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          show: true
        },
        xAxis: [
          {
            type: "category",
            data: this.studentGradeName,
            name: "学课",
            axisTick: {
              alignWithLabel: "auto"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "分数",
            min: 0,
            max: 100,
            interval: 10
          }
        ],
        series: [
          {
            name: "成绩",
            type: "bar",
            barWidth: "45%",
            data: this.studentGradeNum
          }
        ]
      });
      window.addEventListener("resize", () => personGradeChart.resize());

      //成绩提示
      const gaofen = this.studentGradeNum.filter(item => item >= 80);
      this.shanxingtuData[0] = { value: gaofen.length, name: "80-100分阶段" };
      const zhongfen = this.studentGradeNum.filter(
        item => item >= 60 && item < 80
      );
      this.shanxingtuData[1] = { value: zhongfen.length, name: "60-79分阶段" };
      const difeng = this.studentGradeNum.filter(item => item < 60);
      this.shanxingtuData[2] = { value: difeng.length, name: "0-59分阶段" };
      let num = "";
      if (difeng.length > 0) {
        num = 1;
      } else if (difeng.length <= 0 && zhongfen.length > 0) {
        num = 2;
      } else if (
        gaofen.length > 0 &&
        zhongfen.length <= 0 &&
        difeng.length <= 0
      ) {
        num = 3;
      }
      if (num == 3) {
        this.$message({
          type: "success",
          showClose: true,
          duration: 2000,
          message: "成绩很棒,请继续保持!!!"
        });
      } else if (num == 2) {
        this.$message({
          type: "warning",
          showClose: true,
          duration: 2000,
          message: "成绩有待提高,请继续加油!!!"
        });
      } else if (num == 1) {
        this.$message({
          type: "error",
          showClose: true,
          duration: 2000,
          message: "学课有考试未通过,请注意学习态度!!!"
        });
      }

      //饼图
      const shanxingtu = ECharts.init(document.getElementById("shanxingtu"));
      shanxingtu.setOption({
        title: {
          text: "成绩水平分布",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            return (
              "成绩水平分布" + "<br>" + params.name + "：" + params.value + "科"
            );
          }
        },
        legend: {
          orient: "vertical",
          x: "left"
        },
        series: [
          {
            name: "成绩水平",
            type: "pie",
            radius: "75%",
            center: ["50%", "55%"],
            data: this.shanxingtuData
          }
        ]
      });
      window.addEventListener("resize", () => shanxingtu.resize());
    }
  },
  computed: {
    averageGrade() {
      const average =
        this.studentGradeNum.reduce(
          (accumulator, currentValue) => accumulator + currentValue,
          0
        ) / this.studentGradeNum.length;
      return average;
    },
    maxGrade() {
      const max = Math.max(...this.studentGradeNum);
      return max;
    },
    minGrade() {
      const min = Math.min(...this.studentGradeNum);
      return min;
    },
  }
};
</script>

<style lang="less" scoped>
</style>